<template>
    <div class="flex flex-1 flex-col px-[100px] mt-20">
        <div class="flex h-[700px] bg-slate-50">
            <div v-if="!movieDetail.isBuy" class="relative flex items-center justify-center flex-1 overflow-hidden">
                <el-image class="absolute w-full h-full" v-if="!movieDetail.isBuy" :src="movieDetail.movieImg"
                    fit="cover" />
                <div class="relative z-9 w-[200px] flex justify-center border-style" @click="buyMovie">
                    <el-icon size="80px" color="#c2410c">
                        <ShoppingTrolley />
                    </el-icon>
                </div>
            </div>
            <video-player v-else class="w-full h-[700px]" :src="movieDetail.url" :poster="movieDetail.movieImg" controls
                :loop="true" :volume="0.6">
            </video-player>
        </div>
        <div class="flex justify-between mt-8">
            <div class="flex flex-col">
                <div class="text-lg font-bold">{{ movieDetail.movieName }}</div>
                <div class="mt-2">
                    <div class="inline-flex mr-2">{{ movieDetail.movieScore.toFixed(1) }}分</div>
                    <div class="inline-flex mr-2">{{ movieDetail.movieYear }}</div>
                    <div class="inline-flex mr-2">{{ movieDetail.movieLength }}分钟</div>
                    <div class="inline-flex mr-2">{{ movieDetail.movieArea }}</div>
                    <div class="inline-flex mr-2">
                        <el-tag v-for="item in movieDetail.movieTypes" type="primary">{{ item.typeName }}</el-tag>
                    </div>
                </div>
            </div>
            <div class="flex mr-2">
              <el-rate @change="handleScoreChange" v-model="movieDetail.movieScore" />
                <img v-if="isPrize" @click="handlePrize" class="w-[32px] h-[32px] mr-2"
                    src="../assets/icon/like-active.png" alt="" />
                <img v-else @click="handlePrize" class="w-[32px] h-[32px] mr-2" src="../assets/icon/like.png" alt="" />
                <img v-if="isCollect" @click="handleCollect" class="w-[30px] h-[30px] mr-2"
                    src="../assets/icon/star-active.png" alt="" />
                <img v-else @click="handleCollect" class="w-[30px] h-[30px] mr-2" src="../assets/icon/star.png"
                    alt="" />
            </div>
        </div>
        <div v-if="movieDetail.movieInfo" class="mt-2">{{ movieDetail.movieInfo }}</div>
        <div class="flex flex-col flex-1 mt-8">
            <div class="text-lg font-bold">演员</div>
            <div class="flex flex-col mt-4">
                <div v-for="item in movieDetail.moviePerformers" class="mb-4">
                    <el-image style="width: 160px; height: 200px" :src="item.performerImg" fit="cover" />
                    <div>
                        {{ item.performerName }} <span class="text-gray-400">饰 {{ item.performerRole }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-col flex-1 mt-8">
            <div class="text-lg font-bold">评价</div>
            <div class="flex flex-col">
                <el-input type="textarea" rows="4" v-model="commentContent"></el-input>
                <div class="flex justify-end mt-2">
                    <el-button type="primary" @click="submitComment">提交</el-button>
                </div>
            </div>
            <div class="flex flex-col p-4 mt-4 text-gray-900 bg-gray-200 shadow-md">
                <div v-for="item in commentList" class="p-2 mb-4 bg-gray-100">
                    <div class="flex items-center">
                        <el-image style="width: 30px; height: 30px; border-radius: 20px;" :src="item.headUrl" fit="cover" />
                        <div class="ml-2">{{ item.name }}</div>

                    </div>
                    <div class="mt-2">{{ item.content }}</div>
                    <div class="mt-2 text-sm text-gray-600">{{ item.createTime }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ShoppingTrolley, StarFilled, Star } from '@element-plus/icons-vue'
import { onMounted, reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// import { getGoods, getComments } from '@/apis/movie'
// import { addCart } from '@/apis/cart'
// import { addOrder, addRuleOrder, registerRule } from '@/apis/order'
// import { getGroupRuleList } from '@/apis/banner'
import { ElMessage } from 'element-plus'
import { addComment, getComments, getMovie, delCollect, addPrize, delPrize, addCollect, sendScore } from '@/apis/movie'
import { addOrder } from '@/apis/order'
import { VideoPlayer } from '@videojs-player/vue'
import 'video.js/dist/video-js.css'
const route = useRoute()
const router = useRouter()
const movieId = ref()
const commentContent = ref('')
const movieDetail = reactive({
    movieImg: '',
    movieName: '',
    url: '',
    movieInfo: '',
    movieLength: 0,
    movieYear: 0,
    movieArea: '',
    movieScore: 0,
    prizeTimes: 0,
    collectTimes: 0,
    buyTimes: 0,
    commentTimes: 0,
    movieTypes: [],
    isPrize: 0,
    isCollect: 0,
    isBuy: 0
})
const isCollect = ref(false)
const isPrize = ref(false)
const movieNum = ref(1)
const handleChange = () => { }
const getDetail = async () => {
    const res = await getMovie(movieId.value)
    Object.assign(movieDetail, res)
    isCollect.value = !!res.isCollect
    isPrize.value = !!res.isPrize
}

const submitComment = async () => {
    await addComment({
        movieId: movieId.value,
        content: commentContent.value
    })
    ElMessage.success('提交成功')
    getAllComment()
}
const commentList = ref([])
const getAllComment = async () => {
    const res = await getComments({
        pageSize: 1000,
        pageNum: 1,
        movieId: movieId.value
    })
    commentList.value = res.list
}
// const ruleList = ref([])
// const getRules = async () => {
//     const res = await getGroupRuleList({
//         pageNum: 1,
//         pageSize: 1000,
//         movieId: movieId.value
//     })
//     ruleList.value = res.list
// }
// const join = async (id) => {
//     await registerRule(id)
//     ElMessage.success("报名成功")
//     getRules()
// }
const handleCollect = async () => {
    isCollect.value = !isCollect.value
    if (!isCollect.value) {
        await delCollect(movieId.value)
        ElMessage.success('取消收藏成功')
    } else {
        await addCollect(movieId.value)
        ElMessage.success('收藏成功')
    }
}
const handlePrize = async () => {
    isPrize.value = !isPrize.value
    if (!isPrize.value) {
        await delPrize(movieId.value)
        ElMessage.success('取消点赞成功')
    } else {
        await addPrize(movieId.value)
        ElMessage.success('点赞成功')
    }
}
const handleScoreChange = async () => {
    await sendScore({
      movieId: movieId.value,
      movieScore: movieDetail.movieScore
    })
    ElMessage.success('评分成功')
}
onMounted(() => {
    const { id } = route.query
    movieId.value = id
    getDetail()
    getAllComment()
    // getRules()
})
const buyMovie = async () => {
    await addOrder(movieId.value)
    ElMessage.success('购买成功')
    getDetail()
}
</script>

<style lang="scss" scoped>
.border-style {
    border: 2px solid #c2410c;
    border-radius: 8px;
    @apply p-4 cursor-pointer;

    &:hover {
        @apply bg-opacity-40 bg-white;
    }
}
</style>
